<template>
  <el-dialog
    title="账户余额"
    :visible="$store.state.balancePaneShow"
    width="20%"
    @close="$store.commit('closeBalancePane')"
    >
    <el-button type="success" style="float:right;margin-left:10px" @click="showRecharge = !showRecharge">充值</el-button>
    <el-popconfirm
      confirmButtonText='好的'
      cancelButtonText='不用了'
      @confirm="withdraw"
      icon="el-icon-info"
      iconColor="rgb(102,177,255)"
      title="确认进行提现吗？"
    >
    <template #reference>
      <el-button type="primary" style="float:right">提现</el-button>
      </template>
    </el-popconfirm>
    <span style="font-size:32px">123.18</span> <span>元</span>
    <el-divider></el-divider>
    <el-collapse-transition>
      <el-card v-if="showRecharge">
        <div slot="header">
          <el-button type="default" size="mini" style="float:right" circle icon="el-icon-close" @click="showRecharge = false"/>
          充值
        </div>
        <div style="text-align:center">
          <span style="font-size:18px">充值金额</span>
          <el-input-number v-model="amount" :precision="2" :step="0.1" :max="9999" class="amount-input"></el-input-number>
        </div>
        <div style="text-align:center;margin-top:20px">
          <img src="/imgs/qrcode.png" alt="">
          <div></div>
          <span>使用微信/支付宝扫描二维码</span>
        </div>
      </el-card>
    </el-collapse-transition>
    <el-card style="margin-top:20px">
      <div slot="header">交易明细</div>
      <div style="text-align:center">
        <img src="" alt="">
        <p>暂无明细记录</p>
      </div>
    </el-card>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      amount: 100,
      showRecharge: false
    }
  },
  methods: {
    withdraw () {
      this.$message.success('已提交提现请求')
      this.$store.commit('closeBalancePane')
    }
  }
}
</script>

<style lang="less" scoped>
  .amount-input {
    margin-left: 10px;
  }
</style>
